Skip to content

Fix navbar overflow detection on mobile#138

Merged
MarketDataApp merged 3 commits intomainfrom
staging
Mar 6, 2026
Merged

Fix navbar overflow detection on mobile#138
MarketDataApp merged 3 commits intomainfrom
staging

Conversation

@MarketDataApp
Copy link
Owner

Summary

  • Apply flex-wrap: nowrap on .navbar__inner at all widths so overflow JS can detect flex-item compression on mobile
  • Fix overflow selector to target .user-profile-container (flex item) instead of .user-profile-wrapper (inner child)
  • Bump @marketdataapp/ui to v2.10.1 which adds:
  • Remove local workarounds (MutationObserver, CSS min-width override) now handled by the library

Test plan

  • Staging deploy succeeded
  • Integration tests passed
  • E2E tests passed
  • Verified on 402x874 (iPhone 17 Pro) — login button hidden, only logo + search visible

The overflow JS was hiding .user-profile-wrapper (inner div) but its
parent .user-profile-container (the actual flex item) remained visible,
so the login button was never removed from the navbar on mobile.
The overflow utility's ResizeObserver only fires when the container
resizes, but async-loaded components (user profile) add content without
changing container dimensions. Add a MutationObserver that re-initializes
the overflow handler when child nodes change in the navbar.
v2.10.1 adds MutationObserver for async child content (#8) and sets
login-pill-sized min-width on user-profile-container (#9). Removes
our local MutationObserver workaround and CSS min-width override.
@MarketDataApp MarketDataApp merged commit 7494b22 into main Mar 6, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant